<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrapper {
			width: 100px;
			/* Set the size of the progress bar */
			height: 100px;
			position: absolute;
			/* Enable clipping */
			clip: rect(0px, 100px, 100px, 50px);
			/* Hide half of the progress bar */
		}

		/* Set the sizes of the elements that make up the progress bar */
		.circle {
			width: 80px;
			height: 80px;
			border: 10px solid green;
			border-radius: 50px;
			position: absolute;
			clip: rect(0px, 50px, 100px, 0px);
		}
		
		div[data-anim~=base] {
		  -webkit-animation-iteration-count: 1;  /* Only run once */
		  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
		  -webkit-animation-timing-function:linear; /* Linear animation */
		}
		
		.wrapper[data-anim~=wrapper] {
		  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
		  -webkit-animation-delay: 3s; /* Wait half of the animation */
		  -webkit-animation-name: close-wrapper; /* Keyframes name */
		}
		
		.circle[data-anim~=left] {
		  -webkit-animation-duration: 6s; /* Full animation time */
		  -webkit-animation-name: left-spin;
		}
		
		.circle[data-anim~=right] {
		  -webkit-animation-duration: 3s; /* Half animation time */
		  -webkit-animation-name: right-spin;
		}
		@-webkit-keyframes right-spin {
		  from {
		    -webkit-transform: rotate(0deg);
		  }
		  to {
		    -webkit-transform: rotate(180deg);
		  }
		}
		/* Rotate the left side of the progress bar from 0 to 360 degrees */
		@-webkit-keyframes left-spin {
		  from {
		    -webkit-transform: rotate(0deg);
		  }
		  to {
		    -webkit-transform: rotate(360deg);
		  }
		}
		/* Set the wrapper clip to auto, effectively removing the clip */
		@-webkit-keyframes close-wrapper {
		  to {
		    clip: rect(auto, auto, auto, auto);
		  }
		}
	</style>
	<body>
		<div class="wrapper" data-anim="base wrapper">
			<div class="circle" data-anim="base left"></div>
			<div class="circle" data-anim="base right"></div>
		</div>
	</body>
</html>

<!-- ： 首先：是定义三个动画，第一个是最外层，让他只显示一半，然后运行3s，同时右边运行3s,从0到180度。 
接着：到了180度之后，释放外层的显示一半，让他自动显示其他。然后右边的停止动画并停在那里。
 最后：左边的在原来的基础（跟右边一样运行3s，同样转过180度）再继续转动180度 -->
